package com.step.ems.pages.login

import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.paint
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.text.input.PasswordVisualTransformation
import androidx.compose.ui.text.input.VisualTransformation
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.hilt.navigation.compose.hiltViewModel
import androidx.lifecycle.compose.collectAsStateWithLifecycle
import com.step.ems.R
import com.step.ems.component.LoadingBox
import com.step.ems.component.MyTextField
import com.step.ems.ui.theme.DarkBlue

@Composable
fun LoginScreen(
    viewModel: LoginViewModel = hiltViewModel(),
    toHome: () -> Unit,
) {
    val state by viewModel.loginState.collectAsStateWithLifecycle()
    LoadingBox(modifier = Modifier.fillMaxSize(), state = state) {
        Content(viewModel, toHome)
    }
}

@Composable
fun Content(viewModel: LoginViewModel, toHome: () -> Unit) {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.White)
    ) {
        Spacer(modifier = Modifier.height(100.dp))
        Image(
            painter = painterResource(id = R.drawable.logo), contentDescription = "logo",
            modifier = Modifier.padding(horizontal = 16.dp)
        )
        Spacer(modifier = Modifier.height(10.dp))
        Text(
            text = "Welcome, Let's start!",
            color = Color(0xFF5AB6E2),
            fontSize = 20.sp,
            fontWeight = FontWeight.Bold,
            modifier = Modifier.padding(horizontal = 18.dp)
        )
        Spacer(modifier = Modifier.height(10.dp))
        Body(viewModel, toHome)
    }
}

@Composable
fun Body(viewModel: LoginViewModel, toHome: () -> Unit) {
    var passwordVisible by rememberSaveable { mutableStateOf(false) }
    Column(
        modifier = Modifier
            .fillMaxSize()
            .paint(
                painterResource(id = R.drawable.login_bg),
                contentScale = ContentScale.FillBounds
            )
            .padding(top = 120.dp, start = 16.dp, end = 16.dp)

    ) {
        MyTextField(
            modifier = Modifier
                .fillMaxWidth()
                .height(48.dp),
            onValueChange = { viewModel.username = it },
            value = viewModel.username,
            placeholder = { Text(text = stringResource(id = R.string.username)) },
        )
        Spacer(modifier = Modifier.height(12.dp))
        MyTextField(
            modifier = Modifier
                .fillMaxWidth()
                .height(48.dp),
            onValueChange = { viewModel.password = it },
            value = viewModel.password,
            visualTransformation = if (passwordVisible) VisualTransformation.None else PasswordVisualTransformation(),
            placeholder = { Text(text = stringResource(id = R.string.password)) },
            keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password),
            trailingIcon = {
                val iconId = if (passwordVisible) R.drawable.login_open else R.drawable.login_close
                IconButton(onClick = { passwordVisible = !passwordVisible }) {
                    Icon(
                        painter = painterResource(id = iconId),
                        contentDescription = "ShowOrHide"
                    )
                }
            }
        )
        Spacer(modifier = Modifier.height(45.dp))
        Button(
            modifier = Modifier
                .fillMaxWidth()
                .height(48.dp),
            shape = RoundedCornerShape(4.dp),
            colors = ButtonDefaults.buttonColors(containerColor = DarkBlue),
            onClick = { viewModel.login(toHome) }) {
            Text(text = stringResource(id = R.string.login), fontSize = 16.sp)
        }
    }
}